<template>
  <data-table
    :data="data"
    :columns="columns"
    :border="false"
  >
    <template #online="{ item }">
      <indicator
        :type="item.status ? 'success' : 'danger'"
        :size="6"
      />
    </template>
    <template #avatar="{ item }">
      <el-avatar
        :src="item.avatarUrl"
        :size="40"
      />
    </template>
    <template #enable="{ item }">
      <el-switch
        :model-value="item.enable"
        :active-value="1"
        :inactive-value="0"
        active-text="启用"
        inactive-text="禁用"
        inline-prompt
      />
    </template>
    <template #type="{ item }">
      <el-tag :type="getTagType(item.type)">
        {{ UserTypeText[item.type] || '未知' }}
      </el-tag>
    </template>
    <template #phone="{ item, index }">
      <el-popover
        :content="item.phone"
        :placement="index === 0 ? 'top' : index + 1 === data.length ? 'bottom' : 'left-start'"
      >
        <template #reference>
          <span style="cursor: pointer">{{ encryptPhoneNumber(item.phone) }}</span>
        </template>
      </el-popover>
    </template>
    <template #sex="{ item }">
      <el-tag
        :type="item.sex === 1 ? 'primary' : 'success'"
        effect="plain"
      >
        {{ item.sex === 1 ? '男' : '女' }}
      </el-tag>
    </template>
    <template #departmentName="{ item }">
      {{ item.type !== UserType.Staff ? '-' : item.departmentName }}
    </template>
    <template #handler="{ item }">
      <el-button
        type="primary"
        icon="Edit"
        link
        @click="open(item)"
      >编辑</el-button>
      <el-button
        v-if="item.name === 'admin'"
        type="primary"
        icon="Plus"
        link
      >新增</el-button>
      <el-popconfirm
        :title="`确定要删除 ${item.name} 吗？`"
        width="210"
        confirm-button-type="danger"
      >
        <template #reference>
          <el-button
            link
            type="danger"
            icon="Delete"
          >删除</el-button>
        </template>
      </el-popconfirm>
    </template>
  </data-table>

  <edit-user-drawer
    v-model="visible"
    :user="modalData"
  />
</template>

<script setup>
import { UserTypeText, UserType } from '@/const/user'
import useModal from '@/hooks/useModal'
import DataTable from '@/components/table'
import Indicator from '@/components/indicator'
import EditUserDrawer from './edit-user'

defineProps({
  data: {
    type: Array,
    default: () => [],
  },
})


const { visible, modalData, open } = useModal()
const columns = [
  { label: '姓名', prop: 'name' },
  { label: '头像', slot: 'avatar' },
  { label: '是否在线', slot: 'online' },
  { label: '部门', slot: 'departmentName' },
  { label: '禁用', slot: 'enable' },
  { label: '密码', prop: 'password' },
  { label: '手机号', slot: 'phone', width: 120 },
  { label: '性别', slot: 'sex' },
  { label: '用户类型', slot: 'type', width: 120 },
  { label: '创建时间', prop: 'createTime', width: 120 },
  { label: '操作', slot: 'handler', fixed: 'right', width: 210 },
]

function getTagType(type) {
  const tagMap = {
    [UserType.Staff]: 'primary',
    [UserType.Service]: 'primary',
    [UserType.Customer]: 'success',
    [UserType.Supplier]: 'success',
    [UserType.Visitor]: 'info',
    [UserType.BlackList]: 'danger',
  }

  return tagMap[type] || 'warning'
}

function encryptPhoneNumber(phoneNumber) {
  return `${phoneNumber?.slice(0, 3)}****${phoneNumber?.slice(-4)}`
}
</script>
